<template>
  <div class="videoleft">
    <div class="title">
      <div class="titlename">{{ title }}</div>
      <div class="btn">
        <el-tag type="success">AI一键分析</el-tag>
        <el-tag type="success">AI一键生成报告</el-tag>
      </div>
    </div>
    <div class="videocon">
      <div class="red-box-container" ref="redBoxContainer">
        <div
          v-for="(box, index) in currentRedBoxes"
          :key="index"
          :style="{
            left: box.left + 'px',
            top: box.top + 'px',
            width: box.width + 'px',
            height: box.height + 'px',
          }"
          class="red-box"
        ></div>
      </div>
      <video
        v-if="show"
        style="width: 100%; height: 100%"
        ref="videoPlay"
        id="videoPlay"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        :src="playUrlLeft"
      ></video>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import video from "video.js";
import "video.js/dist/video-js.css";

export default {
  props: {
    videourl: {
      // type: Number,
    },
    title: {
      // type: Number,
    },
    currentProgramId: {
      // type: Number,
      // default: 0
    },
  },
  watch: {
    videourl: {
      handler(n, o) {
        if (n) {
          this.$nextTick(() => {
            this.initLeft(n);
            this.url = n;
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      listLoading: false,
      show: true,
      url: "", //视频路径
      playStart: "", // 开始播放时间
      playEnd: "", // 结束播放时间
      titleName: "电视剧--大考-- 第1集", // 左上角视频名称
      // playUrlLeft: require("@/assets/video/3.mp4"), // 视频地址
      playUrlLeft:'', // 视频地址
      charts: "",
      playerLeft: null,
      allRedBoxes: [
    {
        "index": 0,
        "faces": [
            {
                "score": 0.8705,
                "indexList": [
                    496,
                    235,
                    649,
                    417
                ]
            }
        ]
    },
    {
        "index": 1,
        "faces": [
            {
                "score": 0.8716,
                "indexList": [
                    496,
                    235,
                    649,
                    417
                ]
            }
        ]
    },
    {
        "index": 2,
        "faces": [
            {
                "score": 0.8708,
                "indexList": [
                    496,
                    234,
                    649,
                    416
                ]
            }
        ]
    },
    {
        "index": 3,
        "faces": [
            {
                "score": 0.8709,
                "indexList": [
                    496,
                    234,
                    648,
                    416
                ]
            }
        ]
    },
    {
        "index": 4,
        "faces": [
            {
                "score": 0.8684,
                "indexList": [
                    496,
                    235,
                    648,
                    415
                ]
            }
        ]
    },
    {
        "index": 5,
        "faces": [
            {
                "score": 0.867,
                "indexList": [
                    497,
                    235,
                    648,
                    417
                ]
            }
        ]
    },
    {
        "index": 6,
        "faces": [
            {
                "score": 0.8694,
                "indexList": [
                    497,
                    234,
                    650,
                    416
                ]
            }
        ]
    },
    {
        "index": 7,
        "faces": [
            {
                "score": 0.8713,
                "indexList": [
                    497,
                    232,
                    650,
                    412
                ]
            }
        ]
    },
    {
        "index": 8,
        "faces": [
            {
                "score": 0.8725,
                "indexList": [
                    497,
                    230,
                    649,
                    411
                ]
            }
        ]
    },
    {
        "index": 9,
        "faces": [
            {
                "score": 0.8762,
                "indexList": [
                    494,
                    228,
                    647,
                    415
                ]
            }
        ]
    },
    {
        "index": 10,
        "faces": [
            {
                "score": 0.8769,
                "indexList": [
                    493,
                    228,
                    646,
                    413
                ]
            }
        ]
    },
    {
        "index": 11,
        "faces": [
            {
                "score": 0.8751,
                "indexList": [
                    493,
                    228,
                    646,
                    409
                ]
            }
        ]
    },
    {
        "index": 12,
        "faces": [
            {
                "score": 0.8766,
                "indexList": [
                    492,
                    228,
                    645,
                    409
                ]
            }
        ]
    },
    {
        "index": 13,
        "faces": [
            {
                "score": 0.8776,
                "indexList": [
                    491,
                    229,
                    642,
                    410
                ]
            }
        ]
    },
    {
        "index": 14,
        "faces": [
            {
                "score": 0.8779,
                "indexList": [
                    490,
                    231,
                    642,
                    411
                ]
            }
        ]
    },
    {
        "index": 15,
        "faces": [
            {
                "score": 0.8782,
                "indexList": [
                    490,
                    231,
                    642,
                    410
                ]
            }
        ]
    },
    {
        "index": 16,
        "faces": [
            {
                "score": 0.8796,
                "indexList": [
                    489,
                    231,
                    642,
                    412
                ]
            }
        ]
    },
    {
        "index": 17,
        "faces": [
            {
                "score": 0.8787,
                "indexList": [
                    489,
                    233,
                    643,
                    415
                ]
            }
        ]
    },
    {
        "index": 18,
        "faces": [
            {
                "score": 0.8754,
                "indexList": [
                    490,
                    235,
                    642,
                    417
                ]
            }
        ]
    },
    {
        "index": 19,
        "faces": [
            {
                "score": 0.8741,
                "indexList": [
                    490,
                    238,
                    642,
                    419
                ]
            }
        ]
    },
    {
        "index": 20,
        "faces": [
            {
                "score": 0.8705,
                "indexList": [
                    490,
                    238,
                    641,
                    420
                ]
            }
        ]
    },
    {
        "index": 21,
        "faces": [
            {
                "score": 0.87,
                "indexList": [
                    490,
                    240,
                    641,
                    421
                ]
            }
        ]
    },
    {
        "index": 22,
        "faces": [
            {
                "score": 0.8696,
                "indexList": [
                    490,
                    240,
                    641,
                    421
                ]
            }
        ]
    },
    {
        "index": 23,
        "faces": [
            {
                "score": 0.8692,
                "indexList": [
                    490,
                    240,
                    641,
                    421
                ]
            }
        ]
    },
    {
        "index": 24,
        "faces": [
            {
                "score": 0.8687,
                "indexList": [
                    490,
                    239,
                    642,
                    422
                ]
            }
        ]
    },
    {
        "index": 25,
        "faces": [
            {
                "score": 0.8687,
                "indexList": [
                    491,
                    240,
                    642,
                    421
                ]
            }
        ]
    },
    {
        "index": 26,
        "faces": [
            {
                "score": 0.8697,
                "indexList": [
                    491,
                    240,
                    642,
                    421
                ]
            }
        ]
    },
    {
        "index": 27,
        "faces": [
            {
                "score": 0.8691,
                "indexList": [
                    491,
                    240,
                    643,
                    421
                ]
            }
        ]
    },
    {
        "index": 28,
        "faces": [
            {
                "score": 0.8684,
                "indexList": [
                    493,
                    240,
                    644,
                    421
                ]
            }
        ]
    },
    {
        "index": 29,
        "faces": [
            {
                "score": 0.8683,
                "indexList": [
                    492,
                    240,
                    645,
                    421
                ]
            }
        ]
    },
    {
        "index": 30,
        "faces": [
            {
                "score": 0.868,
                "indexList": [
                    492,
                    240,
                    645,
                    421
                ]
            }
        ]
    },
    {
        "index": 31,
        "faces": [
            {
                "score": 0.8687,
                "indexList": [
                    492,
                    239,
                    645,
                    422
                ]
            }
        ]
    },
    {
        "index": 32,
        "faces": [
            {
                "score": 0.8689,
                "indexList": [
                    492,
                    239,
                    645,
                    422
                ]
            }
        ]
    },
    {
        "index": 33,
        "faces": [
            {
                "score": 0.8695,
                "indexList": [
                    492,
                    239,
                    645,
                    422
                ]
            }
        ]
    },
    {
        "index": 34,
        "faces": [
            {
                "score": 0.869,
                "indexList": [
                    492,
                    239,
                    645,
                    422
                ]
            }
        ]
    },
    {
        "index": 35,
        "faces": [
            {
                "score": 0.8689,
                "indexList": [
                    491,
                    239,
                    643,
                    422
                ]
            }
        ]
    },
    {
        "index": 36,
        "faces": [
            {
                "score": 0.8685,
                "indexList": [
                    491,
                    239,
                    643,
                    422
                ]
            }
        ]
    },
    {
        "index": 37,
        "faces": [
            {
                "score": 0.8647,
                "indexList": [
                    491,
                    239,
                    642,
                    426
                ]
            }
        ]
    },
    {
        "index": 38,
        "faces": [
            {
                "score": 0.8672,
                "indexList": [
                    490,
                    239,
                    642,
                    424
                ]
            }
        ]
    },
    {
        "index": 39,
        "faces": [
            {
                "score": 0.8694,
                "indexList": [
                    490,
                    240,
                    642,
                    424
                ]
            }
        ]
    },
    {
        "index": 40,
        "faces": [
            {
                "score": 0.8694,
                "indexList": [
                    491,
                    240,
                    642,
                    424
                ]
            }
        ]
    },
    {
        "index": 41,
        "faces": [
            {
                "score": 0.8692,
                "indexList": [
                    491,
                    239,
                    642,
                    422
                ]
            }
        ]
    },
    {
        "index": 42,
        "faces": [
            {
                "score": 0.8683,
                "indexList": [
                    491,
                    239,
                    642,
                    422
                ]
            }
        ]
    },
    {
        "index": 43,
        "faces": [
            {
                "score": 0.867,
                "indexList": [
                    493,
                    239,
                    644,
                    424
                ]
            }
        ]
    },
    {
        "index": 44,
        "faces": [
            {
                "score": 0.8646,
                "indexList": [
                    492,
                    240,
                    645,
                    428
                ]
            }
        ]
    },
    {
        "index": 45,
        "faces": [
            {
                "score": 0.8633,
                "indexList": [
                    492,
                    240,
                    645,
                    430
                ]
            }
        ]
    },
    {
        "index": 46,
        "faces": [
            {
                "score": 0.8631,
                "indexList": [
                    492,
                    239,
                    645,
                    430
                ]
            }
        ]
    },
    {
        "index": 47,
        "faces": [
            {
                "score": 0.8642,
                "indexList": [
                    491,
                    239,
                    643,
                    428
                ]
            }
        ]
    },
    {
        "index": 48,
        "faces": [
            {
                "score": 0.8645,
                "indexList": [
                    493,
                    239,
                    644,
                    427
                ]
            }
        ]
    },
    {
        "index": 49,
        "faces": [
            {
                "score": 0.8662,
                "indexList": [
                    493,
                    238,
                    644,
                    425
                ]
            }
        ]
    },
    {
        "index": 50,
        "faces": [
            {
                "score": 0.8675,
                "indexList": [
                    494,
                    238,
                    644,
                    425
                ]
            }
        ]
    },
    {
        "index": 51,
        "faces": [
            {
                "score": 0.8669,
                "indexList": [
                    494,
                    238,
                    644,
                    425
                ]
            }
        ]
    },
    {
        "index": 52,
        "faces": [
            {
                "score": 0.8651,
                "indexList": [
                    491,
                    238,
                    643,
                    428
                ]
            }
        ]
    },
    {
        "index": 53,
        "faces": [
            {
                "score": 0.8659,
                "indexList": [
                    490,
                    237,
                    642,
                    428
                ]
            }
        ]
    },
    {
        "index": 54,
        "faces": [
            {
                "score": 0.8726,
                "indexList": [
                    492,
                    237,
                    642,
                    422
                ]
            }
        ]
    },
    {
        "index": 55,
        "faces": [
            {
                "score": 0.8749,
                "indexList": [
                    493,
                    233,
                    644,
                    417
                ]
            }
        ]
    },
    {
        "index": 56,
        "faces": [
            {
                "score": 0.8762,
                "indexList": [
                    494,
                    233,
                    644,
                    415
                ]
            }
        ]
    },
    {
        "index": 57,
        "faces": [
            {
                "score": 0.8778,
                "indexList": [
                    494,
                    231,
                    644,
                    413
                ]
            }
        ]
    },
    {
        "index": 58,
        "faces": [
            {
                "score": 0.8799,
                "indexList": [
                    493,
                    229,
                    645,
                    412
                ]
            }
        ]
    },
    {
        "index": 59,
        "faces": [
            {
                "score": 0.8806,
                "indexList": [
                    494,
                    228,
                    644,
                    411
                ]
            }
        ]
    },
    {
        "index": 60,
        "faces": [
            {
                "score": 0.878,
                "indexList": [
                    494,
                    228,
                    644,
                    409
                ]
            }
        ]
    },
    {
        "index": 61,
        "faces": [
            {
                "score": 0.8757,
                "indexList": [
                    494,
                    227,
                    645,
                    407
                ]
            }
        ]
    },
    {
        "index": 62,
        "faces": [
            {
                "score": 0.8754,
                "indexList": [
                    494,
                    228,
                    645,
                    406
                ]
            }
        ]
    },
    {
        "index": 63,
        "faces": [
            {
                "score": 0.8771,
                "indexList": [
                    494,
                    229,
                    645,
                    408
                ]
            }
        ]
    },
    {
        "index": 64,
        "faces": [
            {
                "score": 0.8765,
                "indexList": [
                    494,
                    229,
                    645,
                    408
                ]
            }
        ]
    },
    {
        "index": 65,
        "faces": [
            {
                "score": 0.8761,
                "indexList": [
                    494,
                    229,
                    645,
                    408
                ]
            }
        ]
    },
    {
        "index": 66,
        "faces": [
            {
                "score": 0.8772,
                "indexList": [
                    494,
                    229,
                    645,
                    408
                ]
            }
        ]
    },
    {
        "index": 67,
        "faces": [
            {
                "score": 0.878,
                "indexList": [
                    494,
                    229,
                    644,
                    408
                ]
            }
        ]
    },
    {
        "index": 68,
        "faces": [
            {
                "score": 0.8786,
                "indexList": [
                    494,
                    231,
                    644,
                    411
                ]
            }
        ]
    },
    {
        "index": 69,
        "faces": [
            {
                "score": 0.88,
                "indexList": [
                    494,
                    230,
                    643,
                    409
                ]
            }
        ]
    },
    {
        "index": 70,
        "faces": [
            {
                "score": 0.8809,
                "indexList": [
                    494,
                    230,
                    643,
                    409
                ]
            }
        ]
    },
    {
        "index": 71,
        "faces": [
            {
                "score": 0.8814,
                "indexList": [
                    494,
                    229,
                    644,
                    410
                ]
            }
        ]
    },
    {
        "index": 72,
        "faces": [
            {
                "score": 0.8774,
                "indexList": [
                    495,
                    231,
                    645,
                    410
                ]
            }
        ]
    },
    {
        "index": 73,
        "faces": [
            {
                "score": 0.8738,
                "indexList": [
                    494,
                    232,
                    646,
                    413
                ]
            }
        ]
    },
    {
        "index": 74,
        "faces": [
            {
                "score": 0.8713,
                "indexList": [
                    497,
                    234,
                    649,
                    416
                ]
            }
        ]
    },
    {
        "index": 75,
        "faces": [
            {
                "score": 0.8705,
                "indexList": [
                    497,
                    237,
                    650,
                    417
                ]
            }
        ]
    },
    {
        "index": 76,
        "faces": [
            {
                "score": 0.872,
                "indexList": [
                    500,
                    239,
                    653,
                    418
                ]
            }
        ]
    },
    {
        "index": 77,
        "faces": [
            {
                "score": 0.8725,
                "indexList": [
                    501,
                    240,
                    653,
                    418
                ]
            }
        ]
    },
    {
        "index": 78,
        "faces": [
            {
                "score": 0.8726,
                "indexList": [
                    501,
                    240,
                    653,
                    418
                ]
            }
        ]
    },
    {
        "index": 79,
        "faces": [
            {
                "score": 0.8698,
                "indexList": [
                    501,
                    241,
                    653,
                    420
                ]
            }
        ]
    },
    {
        "index": 80,
        "faces": [
            {
                "score": 0.8663,
                "indexList": [
                    499,
                    243,
                    650,
                    421
                ]
            }
        ]
    },
    {
        "index": 81,
        "faces": [
            {
                "score": 0.8666,
                "indexList": [
                    497,
                    243,
                    649,
                    423
                ]
            }
        ]
    },
    {
        "index": 82,
        "faces": [
            {
                "score": 0.8618,
                "indexList": [
                    496,
                    243,
                    648,
                    426
                ]
            }
        ]
    },
    {
        "index": 83,
        "faces": [
            {
                "score": 0.862,
                "indexList": [
                    494,
                    242,
                    646,
                    430
                ]
            }
        ]
    },
    {
        "index": 84,
        "faces": [
            {
                "score": 0.8618,
                "indexList": [
                    494,
                    242,
                    645,
                    430
                ]
            }
        ]
    },
    {
        "index": 85,
        "faces": [
            {
                "score": 0.8631,
                "indexList": [
                    493,
                    242,
                    646,
                    430
                ]
            }
        ]
    },
    {
        "index": 86,
        "faces": [
            {
                "score": 0.8651,
                "indexList": [
                    492,
                    243,
                    645,
                    429
                ]
            }
        ]
    },
    {
        "index": 87,
        "faces": [
            {
                "score": 0.868,
                "indexList": [
                    491,
                    241,
                    643,
                    424
                ]
            }
        ]
    },
    {
        "index": 88,
        "faces": [
            {
                "score": 0.8678,
                "indexList": [
                    491,
                    241,
                    643,
                    424
                ]
            }
        ]
    },
    {
        "index": 89,
        "faces": [
            {
                "score": 0.8666,
                "indexList": [
                    491,
                    242,
                    643,
                    425
                ]
            }
        ]
    },
    {
        "index": 90,
        "faces": [
            {
                "score": 0.8638,
                "indexList": [
                    491,
                    244,
                    642,
                    428
                ]
            }
        ]
    },
    {
        "index": 91,
        "faces": [
            {
                "score": 0.8641,
                "indexList": [
                    491,
                    244,
                    641,
                    427
                ]
            }
        ]
    },
    {
        "index": 92,
        "faces": [
            {
                "score": 0.8623,
                "indexList": [
                    491,
                    245,
                    641,
                    427
                ]
            }
        ]
    },
    {
        "index": 93,
        "faces": [
            {
                "score": 0.8605,
                "indexList": [
                    492,
                    246,
                    640,
                    428
                ]
            }
        ]
    },
    {
        "index": 94,
        "faces": [
            {
                "score": 0.8598,
                "indexList": [
                    491,
                    245,
                    640,
                    427
                ]
            }
        ]
    },
    {
        "index": 95,
        "faces": [
            {
                "score": 0.8606,
                "indexList": [
                    491,
                    245,
                    641,
                    424
                ]
            }
        ]
    },
    {
        "index": 96,
        "faces": [
            {
                "score": 0.8596,
                "indexList": [
                    491,
                    245,
                    641,
                    424
                ]
            }
        ]
    },
    {
        "index": 97,
        "faces": [
            {
                "score": 0.8615,
                "indexList": [
                    491,
                    246,
                    640,
                    424
                ]
            }
        ]
    },
    {
        "index": 98,
        "faces": [
            {
                "score": 0.8621,
                "indexList": [
                    492,
                    245,
                    640,
                    425
                ]
            }
        ]
    },
    {
        "index": 99,
        "faces": [
            {
                "score": 0.8625,
                "indexList": [
                    492,
                    243,
                    641,
                    427
                ]
            }
        ]
    },
    {
        "index": 100,
        "faces": [
            {
                "score": 0.8619,
                "indexList": [
                    492,
                    242,
                    641,
                    427
                ]
            }
        ]
    },
    {
        "index": 101,
        "faces": [
            {
                "score": 0.863,
                "indexList": [
                    493,
                    243,
                    641,
                    427
                ]
            }
        ]
    },
    {
        "index": 102,
        "faces": [
            {
                "score": 0.8616,
                "indexList": [
                    492,
                    243,
                    640,
                    424
                ]
            }
        ]
    },
    {
        "index": 103,
        "faces": [
            {
                "score": 0.8613,
                "indexList": [
                    492,
                    244,
                    640,
                    425
                ]
            }
        ]
    },
    {
        "index": 104,
        "faces": [
            {
                "score": 0.8616,
                "indexList": [
                    492,
                    244,
                    639,
                    425
                ]
            }
        ]
    },
    {
        "index": 105,
        "faces": [
            {
                "score": 0.8626,
                "indexList": [
                    493,
                    244,
                    639,
                    426
                ]
            }
        ]
    },
    {
        "index": 106,
        "faces": [
            {
                "score": 0.8633,
                "indexList": [
                    492,
                    243,
                    638,
                    425
                ]
            }
        ]
    },
    {
        "index": 107,
        "faces": [
            {
                "score": 0.8665,
                "indexList": [
                    492,
                    239,
                    637,
                    424
                ]
            }
        ]
    },
    {
        "index": 108,
        "faces": [
            {
                "score": 0.8717,
                "indexList": [
                    493,
                    236,
                    639,
                    422
                ]
            }
        ]
    },
    {
        "index": 109,
        "faces": [
            {
                "score": 0.8763,
                "indexList": [
                    493,
                    235,
                    639,
                    419
                ]
            }
        ]
    },
    {
        "index": 110,
        "faces": [
            {
                "score": 0.8768,
                "indexList": [
                    495,
                    234,
                    639,
                    416
                ]
            }
        ]
    },
    {
        "index": 111,
        "faces": [
            {
                "score": 0.8768,
                "indexList": [
                    496,
                    233,
                    641,
                    417
                ]
            }
        ]
    },
    {
        "index": 112,
        "faces": [
            {
                "score": 0.8757,
                "indexList": [
                    496,
                    235,
                    642,
                    418
                ]
            }
        ]
    },
    {
        "index": 113,
        "faces": [
            {
                "score": 0.8741,
                "indexList": [
                    496,
                    236,
                    643,
                    419
                ]
            }
        ]
    },
    {
        "index": 114,
        "faces": [
            {
                "score": 0.8712,
                "indexList": [
                    496,
                    236,
                    643,
                    419
                ]
            }
        ]
    },
    {
        "index": 115,
        "faces": [
            {
                "score": 0.8703,
                "indexList": [
                    496,
                    236,
                    643,
                    420
                ]
            }
        ]
    },
    {
        "index": 116,
        "faces": [
            {
                "score": 0.8684,
                "indexList": [
                    496,
                    237,
                    643,
                    422
                ]
            }
        ]
    },
    {
        "index": 117,
        "faces": [
            {
                "score": 0.8678,
                "indexList": [
                    496,
                    237,
                    643,
                    422
                ]
            }
        ]
    },
    {
        "index": 118,
        "faces": [
            {
                "score": 0.8672,
                "indexList": [
                    496,
                    236,
                    643,
                    422
                ]
            }
        ]
    },
    {
        "index": 119,
        "faces": [
            {
                "score": 0.8665,
                "indexList": [
                    496,
                    236,
                    643,
                    422
                ]
            }
        ]
    },
    {
        "index": 120,
        "faces": [
            {
                "score": 0.8652,
                "indexList": [
                    496,
                    237,
                    643,
                    424
                ]
            }
        ]
    },
    {
        "index": 121,
        "faces": [
            {
                "score": 0.8654,
                "indexList": [
                    496,
                    237,
                    643,
                    424
                ]
            }
        ]
    },
    {
        "index": 122,
        "faces": [
            {
                "score": 0.8654,
                "indexList": [
                    496,
                    236,
                    643,
                    422
                ]
            }
        ]
    },
    {
        "index": 123,
        "faces": [
            {
                "score": 0.8663,
                "indexList": [
                    496,
                    236,
                    644,
                    422
                ]
            }
        ]
    },
    {
        "index": 124,
        "faces": [
            {
                "score": 0.8676,
                "indexList": [
                    496,
                    236,
                    644,
                    422
                ]
            }
        ]
    },
    {
        "index": 125,
        "faces": [
            {
                "score": 0.8665,
                "indexList": [
                    497,
                    236,
                    644,
                    422
                ]
            }
        ]
    },
    {
        "index": 126,
        "faces": [
            {
                "score": 0.8661,
                "indexList": [
                    497,
                    238,
                    644,
                    423
                ]
            }
        ]
    },
    {
        "index": 127,
        "faces": [
            {
                "score": 0.8663,
                "indexList": [
                    497,
                    238,
                    644,
                    423
                ]
            }
        ]
    },
    {
        "index": 128,
        "faces": [
            {
                "score": 0.8672,
                "indexList": [
                    498,
                    238,
                    646,
                    423
                ]
            }
        ]
    },
    {
        "index": 129,
        "faces": [
            {
                "score": 0.8678,
                "indexList": [
                    498,
                    237,
                    646,
                    421
                ]
            }
        ]
    },
    {
        "index": 130,
        "faces": [
            {
                "score": 0.8687,
                "indexList": [
                    498,
                    237,
                    646,
                    421
                ]
            }
        ]
    },
    {
        "index": 131,
        "faces": [
            {
                "score": 0.8684,
                "indexList": [
                    498,
                    238,
                    646,
                    423
                ]
            }
        ]
    },
    {
        "index": 132,
        "faces": [
            {
                "score": 0.8683,
                "indexList": [
                    498,
                    237,
                    646,
                    421
                ]
            }
        ]
    },
    {
        "index": 133,
        "faces": [
            {
                "score": 0.868,
                "indexList": [
                    498,
                    237,
                    646,
                    422
                ]
            }
        ]
    },
    {
        "index": 134,
        "faces": [
            {
                "score": 0.8677,
                "indexList": [
                    498,
                    237,
                    646,
                    422
                ]
            }
        ]
    },
    {
        "index": 135,
        "faces": [
            {
                "score": 0.8673,
                "indexList": [
                    497,
                    237,
                    644,
                    421
                ]
            }
        ]
    },
    {
        "index": 136,
        "faces": [
            {
                "score": 0.8675,
                "indexList": [
                    497,
                    237,
                    644,
                    421
                ]
            }
        ]
    },
    {
        "index": 137,
        "faces": [
            {
                "score": 0.868,
                "indexList": [
                    496,
                    238,
                    644,
                    423
                ]
            }
        ]
    },
    {
        "index": 138,
        "faces": [
            {
                "score": 0.8673,
                "indexList": [
                    496,
                    238,
                    644,
                    423
                ]
            }
        ]
    },
    {
        "index": 139,
        "faces": [
            {
                "score": 0.8632,
                "indexList": [
                    496,
                    241,
                    644,
                    426
                ]
            }
        ]
    },
    {
        "index": 140,
        "faces": [
            {
                "score": 0.8566,
                "indexList": [
                    497,
                    244,
                    643,
                    430
                ]
            }
        ]
    },
    {
        "index": 141,
        "faces": [
            {
                "score": 0.8474,
                "indexList": [
                    499,
                    247,
                    645,
                    431
                ]
            }
        ]
    },
    {
        "index": 142,
        "faces": [
            {
                "score": 0.838,
                "indexList": [
                    499,
                    249,
                    645,
                    433
                ]
            }
        ]
    },
    {
        "index": 143,
        "faces": [
            {
                "score": 0.8281,
                "indexList": [
                    497,
                    252,
                    643,
                    436
                ]
            }
        ]
    },
    {
        "index": 144,
        "faces": [
            {
                "score": 0.8133,
                "indexList": [
                    497,
                    251,
                    644,
                    438
                ]
            }
        ]
    },
    {
        "index": 145,
        "faces": [
            {
                "score": 0.8209,
                "indexList": [
                    496,
                    253,
                    643,
                    441
                ]
            }
        ]
    },
    {
        "index": 146,
        "faces": [
            {
                "score": 0.8305,
                "indexList": [
                    496,
                    250,
                    643,
                    439
                ]
            }
        ]
    },
    {
        "index": 147,
        "faces": [
            {
                "score": 0.8381,
                "indexList": [
                    496,
                    250,
                    643,
                    437
                ]
            }
        ]
    },
    {
        "index": 148,
        "faces": [
            {
                "score": 0.8432,
                "indexList": [
                    496,
                    249,
                    643,
                    433
                ]
            }
        ]
    },
    {
        "index": 149,
        "faces": [
            {
                "score": 0.8472,
                "indexList": [
                    497,
                    249,
                    642,
                    431
                ]
            }
        ]
    },
    {
        "index": 150,
        "faces": [
            {
                "score": 0.8509,
                "indexList": [
                    496,
                    250,
                    642,
                    431
                ]
            }
        ]
    },
    {
        "index": 151,
        "faces": [
            {
                "score": 0.8533,
                "indexList": [
                    494,
                    249,
                    640,
                    429
                ]
            }
        ]
    },
    {
        "index": 152,
        "faces": [
            {
                "score": 0.8517,
                "indexList": [
                    494,
                    249,
                    640,
                    429
                ]
            }
        ]
    },
    {
        "index": 153,
        "faces": [
            {
                "score": 0.8516,
                "indexList": [
                    494,
                    250,
                    638,
                    431
                ]
            }
        ]
    },
    {
        "index": 154,
        "faces": [
            {
                "score": 0.8538,
                "indexList": [
                    493,
                    250,
                    638,
                    430
                ]
            }
        ]
    },
    {
        "index": 155,
        "faces": [
            {
                "score": 0.8545,
                "indexList": [
                    492,
                    252,
                    637,
                    431
                ]
            }
        ]
    },
    {
        "index": 156,
        "faces": [
            {
                "score": 0.857,
                "indexList": [
                    489,
                    252,
                    635,
                    431
                ]
            }
        ]
    },
    {
        "index": 157,
        "faces": [
            {
                "score": 0.8607,
                "indexList": [
                    485,
                    251,
                    632,
                    432
                ]
            }
        ]
    },
    {
        "index": 158,
        "faces": [
            {
                "score": 0.8607,
                "indexList": [
                    485,
                    252,
                    630,
                    431
                ]
            }
        ]
    },
    {
        "index": 159,
        "faces": [
            {
                "score": 0.8623,
                "indexList": [
                    480,
                    251,
                    627,
                    430
                ]
            }
        ]
    },
    {
        "index": 160,
        "faces": [
            {
                "score": 0.8632,
                "indexList": [
                    476,
                    251,
                    623,
                    430
                ]
            }
        ]
    },
    {
        "index": 161,
        "faces": [
            {
                "score": 0.8641,
                "indexList": [
                    472,
                    249,
                    620,
                    429
                ]
            }
        ]
    },
    {
        "index": 162,
        "faces": [
            {
                "score": 0.8627,
                "indexList": [
                    468,
                    250,
                    617,
                    429
                ]
            }
        ]
    },
    {
        "index": 163,
        "faces": [
            {
                "score": 0.8578,
                "indexList": [
                    466,
                    250,
                    613,
                    427
                ]
            }
        ]
    },
    {
        "index": 164,
        "faces": [
            {
                "score": 0.8517,
                "indexList": [
                    464,
                    250,
                    609,
                    424
                ]
            }
        ]
    },
    {
        "index": 165,
        "faces": [
            {
                "score": 0.8515,
                "indexList": [
                    463,
                    248,
                    608,
                    422
                ]
            }
        ]
    },
    {
        "index": 166,
        "faces": [
            {
                "score": 0.8528,
                "indexList": [
                    459,
                    245,
                    605,
                    421
                ]
            }
        ]
    },
    {
        "index": 167,
        "faces": [
            {
                "score": 0.8619,
                "indexList": [
                    455,
                    244,
                    602,
                    419
                ]
            }
        ]
    },
    {
        "index": 168,
        "faces": [
            {
                "score": 0.8637,
                "indexList": [
                    452,
                    243,
                    597,
                    418
                ]
            }
        ]
    },
    {
        "index": 169,
        "faces": [
            {
                "score": 0.8602,
                "indexList": [
                    448,
                    244,
                    594,
                    416
                ]
            }
        ]
    },
    {
        "index": 170,
        "faces": [
            {
                "score": 0.8593,
                "indexList": [
                    440,
                    244,
                    587,
                    417
                ]
            }
        ]
    },
    {
        "index": 171,
        "faces": [
            {
                "score": 0.8571,
                "indexList": [
                    435,
                    246,
                    584,
                    418
                ]
            }
        ]
    },
    {
        "index": 172,
        "faces": [
            {
                "score": 0.857,
                "indexList": [
                    428,
                    247,
                    576,
                    418
                ]
            }
        ]
    },
    {
        "index": 173,
        "faces": [
            {
                "score": 0.8557,
                "indexList": [
                    422,
                    252,
                    568,
                    422
                ]
            }
        ]
    },
    {
        "index": 174,
        "faces": [
            {
                "score": 0.8515,
                "indexList": [
                    418,
                    258,
                    562,
                    427
                ]
            }
        ]
    },
    {
        "index": 175,
        "faces": [
            {
                "score": 0.8173,
                "indexList": [
                    413,
                    269,
                    556,
                    431
                ]
            }
        ]
    },
    {
        "index": 176,
        "faces": [
            {
                "score": 0.8339,
                "indexList": [
                    411,
                    275,
                    553,
                    438
                ]
            }
        ]
    },
    {
        "index": 177,
        "faces": [
            {
                "score": 0.8515,
                "indexList": [
                    407,
                    284,
                    548,
                    445
                ]
            }
        ]
    },
    {
        "index": 178,
        "faces": [
            {
                "score": 0.851,
                "indexList": [
                    405,
                    290,
                    543,
                    447
                ]
            }
        ]
    },
    {
        "index": 179,
        "faces": [
            {
                "score": 0.851,
                "indexList": [
                    405,
                    295,
                    542,
                    449
                ]
            }
        ]
    },
    {
        "index": 180,
        "faces": [
            {
                "score": 0.8285,
                "indexList": [
                    407,
                    300,
                    541,
                    450
                ]
            }
        ]
    },
    {
        "index": 181,
        "faces": [
            {
                "score": 0.7952,
                "indexList": [
                    405,
                    308,
                    536,
                    451
                ]
            }
        ]
    },
    {
        "index": 182,
        "faces": [
            {
                "score": 0.7132,
                "indexList": [
                    412,
                    318,
                    529,
                    458
                ]
            }
        ]
    },
], // 存储所有帧的红框位置信息
      currentRedBoxes: [], // 当前帧的红框位置信息
    };
  },
  methods: {
    // 播放对应视频片段
    playInRange(s, e) {
      console.log("s: ", s);

      if (this.playerLeft) {
        console.log("11111 ", this.playerLeft);

        let timer = null;
        clearTimeout(timer);
        this.playerLeft.currentTime(s); // 修正为赋值操作
        this.playerLeft
          .play()
          .then(() => {
            timer = setTimeout(() => {
              clearTimeout(timer);
              try {
                this.playerLeft.pause();
              } catch (_) {}
            }, (e - s) * 1000);
          })
          .catch((error) => {});
      }
    },
    // vedioJs 相关配置
    async initLeft(n) {
      this.show = false;
      if (this.playerLeft) {
        this.playerLeft.reset();
      }
      this.show = true;
      this.playerLeft = await video("videoPlay", {
        bigPlayButton: false,
        width: this.widthPlayer || "640",
        height: this.heightPlayer || "360",
        playbackRates: [],
        muted: true,
        controlsList: "noremoteplayback",
        controls: ["playToggle", "progress", "volumePanel"],
        chapterSelector: false,
        // 禁止显示直播相关信息
        liveDisplay: false,
        // 禁止显示描述相关
        textTrackDisplay: false,
        // 禁止显示字幕相关
        subtitles: false,
        // 禁止显示音轨相关
        audioTrack: false,
      });
      // this.playUrlLeft = "resource/" + n;
      // 更新 src 后重新加载视频
      this.playerLeft.src(require("@/assets/video/4.mp4"));
      this.playerLeft.load();
      // window.playerLeft = this.playerLeft;
      this.videoMethods();
    },
    // 挂载的video事件
    videoMethods() {
      this.playerLeft.on("timeupdate", () => {
        const currentTime = this.playerLeft.currentTime();
        const paused = this.playerLeft.paused(); 
        console.log('paused: ', paused);
        this.updateCurrentRedBoxes(currentTime);
      });
    },
    // 更新当前帧的红框位置信息
    updateCurrentRedBoxes(currentTime) {
      // 假设每帧对应一个索引，这里简单用 currentTime 取整作为索引
      const frameIndex = Math.floor(currentTime);
      console.log("frameIndex: ", frameIndex);
      const frameData = []
      this.allRedBoxes.forEach(frame => {
        if(frame.index == frameIndex) {
          frameData.push({
            index:frame.index,
            faces:[
              {
                score:frame.faces[0].score,
                indexList:[
                  frame.faces[0].indexList[0],
                  frame.faces[0].indexList[1],
                  frame.faces[0].indexList[2] - frame.faces[0].indexList[0],
                  frame.faces[0].indexList[3] - frame.faces[0].indexList[1]
                ]
              }
            ]
          })
        }
      });
      console.log("frameData: ", frameData,this.allRedBoxes);
      this.currentRedBoxes = []; // 清空当前红框数组
      if (frameData.length > 0) {
        frameData.forEach((item) => {
          if(item.faces ){
            item.faces.forEach((face) => {
            console.log("face: ", face);
            // 这里简单假设 indexList 对应 left, top, width, height
            this.currentRedBoxes.push({
              left: (face.indexList[0] / 3).toFixed(1),
              top: (face.indexList[1] / 3).toFixed(1),
              width: (face.indexList[2] / 3).toFixed(1),
              height: (face.indexList[3] / 3).toFixed(1),
            });
          });
          }
        
        });
        console.log("!!!!!! this.currentRedBoxes", this.currentRedBoxes);
      }
    },
    // 更新所有红框位置信息
    updateAllRedBoxes(boxes) {
      this.allRedBoxes = boxes;
    },
  },
  mounted() {
    // 获取红框数据
    // this.$bus.$on("redborderList", (a) => {
    //   console.log("a: ", a);
    //   this.updateAllRedBoxes(a);
    // });
    // this.$bus.$on("playTime", (a) => {
    //   // console.log('2222222222',this.playerLeft);
      this.initLeft();
    //   if (this.playerLeft) {
    //     this.playInRange(a.start, a.end);
    //   }
    // });
    // 模拟接收返回的红框位置信息
    // setTimeout(() => {
    //   this.updateAllRedBoxes([
    //     {
    //       index: 0,
    //       faces: [
    //         {
    //           score: 0.8603,
    //           indexList: [1592, 607, 1852, 951],
    //         },
    //       ],
    //     },
    //   ]);
    // }, 3000);

    // this.initLeft(n);    //tcplayer 初始化
  },
  beforeDestroy() {
    if (this.playerLeft) {
      this.playerLeft.reset();
      this.playerLeft.dispose(); // 销毁实例
    }
  },
};
</script>

<style lang="less" scoped>
// 左侧大块
.videoleft {
  width: 640px;
  height: 360px;

  // background: rgb(211, 150, 150);
  .title {
    width: 100%;
    height: 10%;
    // background: #1a5558;
    display: flex;
    justify-content: space-between;
    .titlename {
      color: black;
      font-size: 16px;
    }
    .btn {
      display: flex;
    }
  }
  .videocon {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
  }
  .red-box-container {
    position: absolute;
    background: red;
    top: 0px;
    left: 0px;
    width:100%;
    height: 100%;
    pointer-events: none;
  }
  .red-box {
    position: absolute;
    border: 2px solid red;
    z-index: 999;
  }
}

/deep/ .video-js .vjs-time-control {
  display: block;
}

/deep/ .video-js .vjs-remaining-time {
  display: none;
}
</style>    